<template>
  <div class="content-list" ref="contentList">
    <div class="content-top-user">
      <div class="user-left">
        <div class="imgbox" @click="goToUserInside">
          <img class="auto-img" :src="contentData.user.thumb" alt="" />
        </div>
        <div class="user-name-wrap">
          <div class="user-name">{{ contentData.user.login }}</div>
          <div
            class="male"
            :class="{ manstyle: contentData.user.gender == 'M' }"
          >
            {{
              contentData.user.gender == "M"
                ? "♂"
                : contentData.user.gender == "F"
                ? "♀"
                : ""
            }}{{ contentData.user.age }}
          </div>
        </div>
        <div class="time">18小时前</div>
      </div>
      <div class="user-right">
        <div class="follow-icon" @click="toFollow">
          {{ contentData.isFollow ? "已关注" : "关注" }}
        </div>
        <div class="delete-icon" @click="deleteData">
          <van-icon name="cross" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-text" v-html="contentData.content"></div>
      <div
        class="imgbox"
        v-for="(item, index) in contentData.pic_urls"
        :key="index"
        @click="PreviewImage(index)"
      >
        <img class="auto-img" :src="item.pic_url" alt="" />
      </div>
    </div>
    <div class="bottom">
      <div class="address">{{ contentData.distance }}</div>
      <div class="bottom-icon-right">
        <div
          class="icon"
          v-for="(item, index) in iconData"
          :key="index"
          @click="iconClickHandel(item)"
        >
          <img
            class="auto-img"
            :class="{ likeStyle: contentData.isLike && item.title == '点赞' }"
            :src="
              item.title == '点赞' && contentData.isLike == true
                ? item.activeIcon
                : item.icon
            "
            @click="goToComment(item)"
          />
          <div class="count">
            {{
              index == 0
                ? contentData.share_count
                : index == 1
                ? contentData.comment_count
                : index == 2
                ? contentData.like_count
                : ""
            }}
          </div>
        </div>
      </div>
    </div>
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { ref } from "vue";
import { Toast, ImagePreview } from "vant";
export default {
  setup() {
    const showShare = ref(false);
    const options = [
      { name: "微信", icon: "wechat" },
      { name: "微博", icon: "weibo" },
      { name: "复制链接", icon: "link" },
      { name: "分享海报", icon: "poster" },
      { name: "二维码", icon: "qrcode" },
    ];

    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };

    return {
      options,
      onSelect,
      showShare,
    };
  },
  props: {
    contentData: {},
  },
  data() {
    return {
      //底部图标
      iconData: [
        {
          icon: require("@/assets/images/home/Vdz.png"),
          title: "分享",
        },
        {
          icon: require("@/assets/images/home/u0q.png"),
          title: "评论",
        },
        {
          icon: require("@/assets/images/home/WVW.png"),
          activeIcon: require("@/assets/images/home/Xgm.png"),
          title: "点赞",
        },
      ],
    };
  },
  created() {
    this.$nextTick(() => {
      this.sentHeight();
    });
  },
  methods: {
    //点赞和分享
    iconClickHandel(item) {
      if (item.title == "点赞") {
        this.$emit("toLike");
      }
      if (item.title == "分享") {
        this.showShare = true;
        this.$emit("addShareCount");
      }
    },
    //关注
    toFollow() {
      let token = window.localStorage.getItem("token");
      if (!token) {
        this.$router.push({ name: "beforeLogin" });
      } else {
        this.$emit("getFollowState");
      }
    },
    //删除
    deleteData() {
      let token = window.localStorage.getItem("token");
      if (!token) {
        this.$router.push({ name: "beforeLogin" });
      } else {
        this.$emit("deleteData");
      }
    },
    //图片浏览
    PreviewImage(index) {
      let imgs = [];
      this.contentData.pic_urls.forEach((item) => {
        imgs.push(item.pic_url);
      });
      ImagePreview({
        images: imgs,
        startPosition: index,
      });
    },
    //向父级传送高度
    sentHeight() {
      if (this.$refs.contentList) {
        this.$emit("getHeight", this.$refs.contentList.clientHeight);
      }
    },
    //前往评论区
    goToComment(item) {
      if (item.title == "评论" && !this.$route.query.id) {
        this.$emit("goTocomment");
      }
    },
    //前往个人主页
    goToUserInside() {
      if (this.$route.name != "userInside") {
        this.$router.push({
          name: "userInside",
          params: { id: this.contentData.user.id },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content-list {
  width: 100%;
  .content-top-user {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    .user-left {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      .imgbox {
        width: 35px;
        height: 35px;
        border-radius: 999px;
        margin: 10px 10px 0 0;
        overflow: hidden;
      }
      .user-name-wrap {
        display: flex;
        .user-name {
          color: #666;
          font-size: 14px;
        }
        .male {
          width: 40px;
          height: 18px;
          border-radius: 999px;
          margin: -5px 0 0 5px;
          background-color: rgb(251, 109, 142);
          text-align: center;
          line-height: 18px;
          color: #fff;
          &.manstyle {
            background-color: rgb(25, 140, 228);
          }
        }
      }
      .time {
        position: absolute;
        left: 45px;
        bottom: -2px;
        color: #999;
      }
    }
    .user-right {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      width: 62px;
      .follow-icon {
        width: 50px;
        height: 22px;
        flex: 0 0 50px;
        border-radius: 999px;
        text-align: center;
        background-color: #eee;
        line-height: 22px;
        font-weight: 600;
        margin-left: -10px;
      }
      .delete-icon {
        color: #aaa;
      }
    }
  }
  .content {
    margin-top: 10px;
    padding: 0 20px 0 40px;
    .content-text {
      font-size: 16px;
      line-height: 25px;
      letter-spacing: 2px;
    }
    .imgbox {
      width: max(250px);
      border-radius: 6px;
      overflow: hidden;
    }
  }
  .bottom {
    padding: 0 20px 0 40px;
    box-sizing: border-box;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    .address {
      font-weight: 600;
    }
    .bottom-icon-right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon {
        width: 35px;
        height: 35px;
        border-radius: 999px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        position: relative;
        display: flex;
        align-items: center;
        margin-right: 30px;
        img {
          &.likeStyle {
            transform: scale(0.6);
          }
        }

        &:last-child {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>